<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-02 11:50:30
 * @LastEditTime: 2023-07-17 23:02:58
 * @FilePath: \myblog\src\components\base\BaseHeader.vue
-->
<template>
        <el-header class="blog-header">
        <el-row type="flex" justify="space-around" align="middle" class="blog-header--wrap">
          <el-col :span="2">
            <div class="blog-logo">
            <el-image class="blog-logo--pic" :src="require('@/assets/images/logo.png')" fit="cover"></el-image>
            </div>
          </el-col>
          <el-col :span="14" class="hidden-xs-only">
            <el-menu router ref="navMenu" class="blog-menu" mode="horizontal" default-active="/index">
            <el-menu-item index="/index">首页</el-menu-item>
            <el-menu-item index="/column">分类</el-menu-item>
            <el-menu-item index="/user" v-if="$store.state.token">个人信息</el-menu-item>
            <el-menu-item index="/article" disabled>文章</el-menu-item>
            <el-menu-item index="/socket">聊天</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4" class="blog-search hidden-xs-only">
            <el-input placeholder="搜索文章" prefix-icon="el-icon-search" v-model="searchVal" @keydown.native.enter="activeSearch">
            </el-input>
          </el-col>
          <el-col :span="4" class="hidden-xs-only">
            <component :is="this.$store.state.token ? 'UserAvatar' : 'UserLoginHeader'"/>
          </el-col>
        </el-row>
      </el-header>
</template>

<script>
import UserAvatar from '@/components/user/UserAvatar.vue'
import UserLoginHeader from '@/components/user/UserLoginHeader.vue'
export default {
  components:{
    UserAvatar,
    UserLoginHeader
  },
data() {
  return {
    searchVal: ""
  }
},
created(){},
mounted(){},
watch:{
  $route(newVal) {
    this.$refs['navMenu'].activeIndex = `/${newVal.name}`;
  }
},
computed:{},
methods:{
  activeSearch() {
    this.$EventBus.$emit('active:search', this.searchVal);
    this.searchVal = ''
  }
},
}
</script>
<style lang="scss" scoped>
    .blog-header {
      display: flex;
      align-items: center;
      background-color: #f58f98;
        .blog-header--wrap {
          width: 100%;
        }
        .blog-menu {
          border-radius: 4px;
          background-color:#f58f98;
          border-bottom: none;
        }
        .blog-logo--pic {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .blog-header--login {
          padding: 0 40px;
        }
        .blog-search {
          width: 240px;
        }
    }
</style>